<template>
	<view class="content">
		<view class="couponItem" v-for="(item ,index) in couponsList">
			<view class="top">
				<image src="../../../static/logo.png" mode=""></image>
				<view class="title">
					<view class="">
						{{item.title}}
					</view>
					<view class="">
						{{item.time_s}} 到期
					</view>
				</view>

				<view class="num">
					<view class="">
						￥{{item.price}}
					</view>
					<view class="">
						满{{item.price_s}}可用
					</view>
				</view>
			</view>

			<view class="handle">
				<view class="text" :style="{opacity: index==Xindex?0:1}">
					<text>
						{{item.desc}}
					</text>
					<u-icon name="arrow-down" size="34rpx" @click="Xindex=index"></u-icon>
				</view>
				<view class="btn">
					<view class="share" @click="shareId=item.coup_id">
						分享
						<button  class="button"
							open-type="share">
							
						</button>
					</view>
					<view :class="item.efficacious?'use':'use use_'" @click="employ(item)">
						{{item.efficacious?'使用':'无法使用'}}
					</view>
				</view>
			</view>
			
			<view class="desc" :style="{maxHeight:index==Xindex?'300rpx':'0'}">
				描述：{{item.desc}}
			</view>
		</view>

		<u-empty v-if="!couponsList.length" marginTop="100rpx" mode="coupon"
			icon="http://cdn.uviewui.com/uview/empty/coupon.png">
		</u-empty>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				couponsList: [],
				money: 0,
				Xindex:-1,
				shareId:-1
			}
		},
		onLoad(e) {
			this.money = e.money || 999999
			this.$myRuquest('home/user/coupons').then(res => {
				res.data.forEach(item => {
					console.log(item.price_s, this.money)
					if (item.price_s <= this.money) item.efficacious = true
				})
				this.couponsList = res.data

			})

		},
		onShareAppMessage (){
			return{
				path: '/pages/index/index?shareId='+this.shareId
			}
		},
		methods: {
			employ(data) {
				console.log(data)

				if (!data.efficacious) return;

				if (this.money == 999999) return uni.switchTab({
					url: '/pages/index/index'
				})
				const pages = getCurrentPages()
				const current = pages[pages.length - 1]
				const eventChannel = current.getOpenerEventChannel()
				eventChannel.emit('someEvent', data)
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 20upx;
		background-color: #FAFAFA;
		min-height: calc(100vh - 40upx);

		.couponItem {
			background-color: #FFFFFF;
			padding: 20upx;
			border-radius: 8upx;

			.top {
				display: flex;
				padding-bottom: 30upx;
				border-bottom: 2upx solid #EBEBEB;

				image {
					width: 180upx;
					height: 180upx;
					margin-right: 16upx;
				}

				.title {
					flex: 2;
					font-size: 32upx;
					color: #333333;
					display: flex;
					margin: 15upx 0;
					flex-direction: column;
					justify-content: space-around;
					font-weight: 700;

					view:nth-child(2) {
						font-size: 28upx;
						color: #FF0000;
						font-weight: 100;
					}
				}

				.num {
					flex: 1;
					text-align: right;
					font-size: 36upx;
					color: #FF0000;
					font-weight: 700;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					view:nth-child(2) {
						color: #999999;
						font-weight: 100;
						font-size: 28upx;
					}
				}
			}
  .desc{
		font-size: 28upx;
		color: #999999;
		overflow: hidden;
		margin-top: 10upx;
		transition: all .8s;
	}
			.handle {
				display: flex;
				margin-top: 20upx;

				.text {
					flex: 1;
					font-size: 28upx;
					color: #999999;
					display: flex;
					align-items: center;

					>text {
						flex: 1;
						width: 100upx;
						white-space: nowrap;

						text-overflow: ellipsis;

						overflow: hidden;
					}
				}

				.btn {
					flex: 1;
					display: flex;
					justify-content: space-around;

					.share {
						width: 140upx;
						height: 54upx;
						background-color: #FED194;
						color: #AC7D3D;
						font-size: 28upx;
						border-radius: 54upx;
						line-height: 54upx;
						text-align: center;
						position: relative;
						.button{
							opacity: 0;
							position: absolute;
							left: 0;
							top: 0;
							right: 0;
							bottom: 0;
						}
					}

					.use {
						width: 140upx;
						height: 54upx;
						background-color: #000000;
						color: #AC7D3D;
						font-size: 28upx;
						border-radius: 54upx;
						line-height: 54upx;
						text-align: center;
					}

					.use_ {
						background-color: #ccc;
						color: #999999;
					}
				}
			}
		}
	}
</style>
